<html>
<head>
    <meta charset="UTF-8">
    <title>插件参数配置修改</title>
    <link id="easyuiTheme"  href="../../static/easyui/themes/bootstrap/easyui.css" rel="stylesheet" type="text/css"/>
    <link href="../../static/easyui/themes/icon.css" rel="stylesheet" type="text/css"/>
    <link href="../../static/css/esaas-easyui-edit.css" rel="stylesheet" type="text/css"/>
    <script src="../../static/easyui/jquery.min.js" type="text/javascript"></script>
    <script src="../../static/easyui/jquery.cookie.js" type="text/javascript"></script>
    <script src="../../static/easyui/ui-theme.js" type="text/javascript"></script>
    <script src="../../static/easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script src="../../static/plugin/assets/jslib.util.js" type="text/javascript"></script>
    <script src="../../static/plugin/assets/jslib.jquery.ajax.js" type="text/javascript"></script>
    <script src="../../static/plugin/assets/jslib.easyui.util.js" type="text/javascript"></script>
    <script src="../../ffres/dict/all.js" type="text/javascript"></script>
    <a href="" target="_blank" id="commonLink" name="commonLink"></a>
</head>
<script type="text/javascript">

    $(function() {
        var pluginId = $.getUrlParam("bpmNodeCode");
        getPluginParamConf(pluginId);
    });

    //获取插件参数配置
    function getPluginParamConf(pluginId){
        var bpmNodeId = $.getUrlParam("nodeId");
        $.ajax({
            type: "post",
            url: '../../api/plugin/param/template/get/'+pluginId,
            data: {},
            success: function(data) {
                dynamicRender(data.rows);
                getPluginParamValue(bpmNodeId,data.rows);
            }
        });
    }

    //动态渲染
    function dynamicRender(rows){
        var subsHtml="";
        var tableArray = new Array();
        var parentIdArray = new Array();
        if(rows.length<1){
            $.messager.alert('提示', '该插件未配置模板！', 'error',function(){
                closeForm();
            });
        }else{
            subsHtml += "<form id=\"ff\" method=\"post\">\n" +
                "        <table id=\"nodeParamTable\" class=\"esaas-info-edit-table\">";
            for(var i=0;i<rows.length;i++){
                if((i+1)%2==1){
                    subsHtml += "<tr>";

                }

                if(rows[i].paramCategory == 'KV' && (rows[i].parentParamId =='' || rows[i].parentParamId ==null)){
                    //paramHtmlTag 01-文本框 02-数字框 03-单选框 04-复选框 11-下拉框
                    if(rows[i].paramHtmlTag == '01'){
                        subsHtml += "<td width=\"15%\" align=\"right\">" + rows[i].paramName + ":</td>";
                        subsHtml += "<td width=\"35%\">";
                        subsHtml += "<input class=\"easyui-textbox\" type=\"text\"\n" + "id=\""+rows[i].paramCode+"\" "+
                            "                                       name=\""+rows[i].paramCode+"\" data-options=\"required:false\"\n" +
                            "                                       style=\"width: 100%; height: 25px;\"></input></td>";
                    }else if(rows[i].paramHtmlTag == '02'){
                        subsHtml += "<td width=\"15%\" align=\"right\">" + rows[i].paramName + ":</td>";
                        subsHtml += "<td width=\"35%\">";
                        subsHtml += "<input class=\"easyui-numberbox\" type=\"text\"\n" + "id=\""+rows[i].paramCode+"\" "+
                            "                                       name=\""+rows[i].paramCode+"\" data-options=\"required:false\"\n" +
                            "                                       style=\"width: 100%; height: 25px;\"></input></td>";
                    }else if(rows[i].paramHtmlTag == '03'){
                        //单选框
                        var optionJson = JSON.parse(rows[i].paramHtmlOption);
                        subsHtml += "<td nowrap width=\"15\" align=\"right\">" + rows[i].paramName +"</td>";
                        subsHtml += "<td width=\"35%\" style=\"text-align:left\">\n" +
                            "\t\t\t\t\t<span class=\"radioSpan\">";
                        for(var j=0; j<optionJson.length; j++){
                            subsHtml += "<input type=\"radio\" id=\""+ rows[i].paramCode +"\" name=\""+ rows[i].paramCode +"\""+" value=\""+optionJson[j].enname+"\">"
                                +optionJson[j].cnname;
                            subsHtml += "</input>";
                        }
                        subsHtml += "</span>\n" +
                            "\t\t\t\t\t</td>";

                    }else if(rows[i].paramHtmlTag == '04'){
                        //复选框
                        var optionJson = JSON.parse(rows[i].paramHtmlOption);
                        subsHtml += "<td nowrap width=\"15\" align=\"right\">" + rows[i].paramName +"</td>";
                        subsHtml += "<td width=\"35%\" style=\"text-align:left\">\n" +
                            "\t\t\t\t\t<span class=\"radioSpan\">";
                        for(var k=0; k<optionJson.length; k++){
                            subsHtml += "<input type=\"checkbox\" id=\""+ rows[i].paramCode +"\" name=\""+ rows[i].paramCode +"\""+" value=\""+optionJson[k].enname+"\">"
                                +optionJson[k].cnname;
                            subsHtml += "</input>";
                        }
                        subsHtml += "</span>\n" +
                            "\t\t\t\t\t</td>";

                    }else if(rows[i].paramHtmlTag == '05'){
                        subsHtml += "<td width=\"15%\" align=\"right\">" + rows[i].paramName + ":</td>";
                        subsHtml += "<td width=\"35%\">";
                        subsHtml += "<input  type=\"password\"  id=\""+ rows[i].paramCode +"\" name=\""+ rows[i].paramCode +"\">"+"</input></td>";
                    }else if(rows[i].paramHtmlTag == '11'){
                        subsHtml += "<td width=\"15%\" align=\"right\">" + rows[i].paramName + ":</td>";
                        subsHtml += "<td width=\"35%\">";
                        var optionJson = JSON.parse(rows[i].paramHtmlOption);
                        subsHtml += "<select class=\"easyui-combobox\"\n" +
                            "id=\""+rows[i].paramCode + "\" + name=\""+rows[i].paramCode + "\" " +
                            "style=\"width: 100%; height: 25px;\">\n";
                        subsHtml += "<option value=\"\">请选择</option>";
                        for(var a=0; a<optionJson.length; a++){
                            subsHtml += "<option value=\"" + optionJson[a].enname + "\">" + optionJson[a].cnname + "</option>";
                        }
                        subsHtml +=		"        </select></td>";
                    }

                }else if(rows[i].paramCategory == 'GRID') {
                    subsHtml += " <table id=\"" + rows[i].paramCode + "\"></table>";
                    tableArray.push(rows[i].paramCode);
                    parentIdArray.push(rows[i].paramId);
                }

                if((i+1)%2==0){
                    subsHtml += "</tr>";
                }
            }
            subsHtml += "        </table>\n" +
                "    </form>\n" +
                "    <div class=\"esaas-info-buttons\">\n" +
                "        <a href=\"javascript:void(0)\" class=\"easyui-linkbutton \" iconCls=\"icon-ok\" onclick=\"submitForm()\" style=\"width:90px\">&nbsp;保&nbsp;存&nbsp;</a>\n" +
                "        <a href=\"javascript:void(0)\" class=\"easyui-linkbutton\" iconCls=\"icon-cancel\" onclick=\"closeForm()\" style=\"width:90px\">&nbsp;关&nbsp;闭&nbsp;</a>\n" +
                "    </div>";
            document.getElementById("dynamicRender").innerHTML = subsHtml.toString();
            $.parser.parse('#dynamicRender');

            for(var i=0; i<parentIdArray.length;i++){
                $.ajax({
                    type: "post",
                    url: '../../api/get/child/grid/column',
                    contentType: "application/json;charset=UTF-8",
                    dataType: "text",
                    data: JSON.stringify({
                        parentId:parentIdArray[i],
                        nodeId: $.getUrlParam("nodeId"),
                        paramCode: tableArray[i]
                    }),
                    async: false,
                    success: function(data) {
                        var result = JSON.parse(data);
                        var parentId = parentIdArray[i];
                        var paramCode = tableArray[i];
                        var gridData = data.gridData;
                        //用js再渲染grid表格
                        //使用js动态创建easyui的datagrid
                        $('#'+tableArray[i]).datagrid({
                            title:"",
                            width: "100%",
                            height: 350,
                            name: parentIdArray[i],
                            pageSize:20,//初始化显示条数
                            pageList:[10,20,30,40,50],//分页列表
                            pagination:"false",
                            rownumbers:"true",
                            singleSelect: true,
                            fitColumn:"false",
                            columns: [result.column],
                            toolbar: [{
                                text: '新增',
                                iconCls: 'icon-add',
                                handler: function(){
                                    preSubmit();
                                    JLEUtil.createModalWin('新增', 'PluginParamConfGridAdd.html?' +
                                        'pluginId=' + $.getUrlParam("bpmNodeCode")+ '&nodeId=' +
                                        $.getUrlParam("nodeId")+ '&parentId=' + parentId+ '&paramCode=' + paramCode);
                                }
                            },'-',{
                                text: '修改',
                                iconCls: 'icon-edit',
                                handler: function(){
                                    var row = $('#'+paramCode).datagrid('getSelected');
                                    var jsonRow = JSON.stringify(row);
                                    var rowData = encodeURIComponent(jsonRow);

                                    if (row){
                                        JLEUtil.createModalWin('修改', 'PluginParamConfGridUpdate.html?' + 'pluginId=' + $.getUrlParam("bpmNodeCode")
                                            + '&nodeId=' + $.getUrlParam("nodeId")+ '&row=' + rowData + '&parentId=' + parentId+ '&paramCode=' + paramCode);
                                    } else {
                                        $.messager.alert('提示','请选择一条记录！','info');
                                    }
                                }
                            },'-',{
                                text: '查看',
                                iconCls: 'icon-ok',
                                handler: function(){
                                    var row = $('#'+paramCode).datagrid('getSelected');
                                    var jsonRow = JSON.stringify(row);
                                    var rowData = encodeURIComponent(jsonRow);
                                    if (row){
                                        JLEUtil.createModalWin('修改', 'PluginParamConfGridView.html?' + 'pluginId=' + $.getUrlParam("bpmNodeCode")
                                            + '&nodeId=' + $.getUrlParam("nodeId")+ '&row=' + rowData + '&parentId=' + parentId+ '&paramCode=' + paramCode);
                                    } else {
                                        $.messager.alert('提示','请选择一条记录！','info');
                                    }
                                }
                            },'-',{
                                text: '删除',
                                iconCls: 'icon-remove',
                                handler: function(){
                                    var row = $('#'+paramCode).datagrid('getSelected');
                                    var jsonRow = JSON.stringify(row);
                                    if (row){
                                        var bpmNodeId = $.getUrlParam("nodeId");
                                        $.ajax({
                                            type: "POST",
                                            dataType: "text",
                                            url: "../../api/delete/plugin/param/grid",
                                            contentType: "application/json;charset=UTF-8",
                                            data: JSON.stringify({
                                                bpmNodeId: bpmNodeId,
                                                paramCode: paramCode,
                                                oldNodeParam: jsonRow
                                            }),
                                            success: function(data){
                                                getPluginParamConf($.getUrlParam("bpmNodeCode"));
                                                $.messager.alert('提示','删除成功！','info');
                                            }
                                        });

                                    } else {
                                        $.messager.alert('提示','请选择一条记录！','info');
                                    }
                                }
                            }],
                            data: result.gridData
                        });

                    }
                });
            }

        }
    }

    //获取插件参数值
    function getPluginParamValue(bpmNodeId, confs){
        $.ajax({
            type: "post",
            url: '../../api/plugin/param/confs/' + bpmNodeId,
            data: {},
            success: function(data) {
                var rows = new Array()
                rows = data.rows;
                for(var i=0; i<rows.length; i++){
                    var paraName = rows[i].paraName;
                    var paraValue = rows[i].paraValue;
                    if(confs[i].paramHtmlTag == '01'){
                        $("#"+paraName).textbox('setValue', paraValue);
                    }else if(confs[i].paramHtmlTag == '02'){
                        $("#"+paraName).numberbox('setValue', paraValue);
                    }else if(confs[i].paramHtmlTag == '03'){
                        $("input[type='radio'][name='"+paraName+"'][value="+ paraValue +"]").prop('checked','true');
                    }else if(confs[i].paramHtmlTag == '04'){
                        if(paraValue.charAt(0)=='[' && paraValue.charAt(paraValue.length-1)==']'){
                            var checkData = JSON.parse(paraValue);
                            if(checkData != null) {
                                for(var j=0; j<checkData.length; j++){
                                    $("input[name='"+paraName+"'][value='"+checkData[j]+"']").attr("checked", true);
                                }
                            }
                        }else{
                            $("input[name='"+paraName+"'][value='"+paraValue+"']").attr("checked", true);
                        }

                    }else if(confs[i].paramHtmlTag == '05'){
                        var PasswordDiv = document.getElementById(paraName);
                        PasswordDiv.value = paraValue;
                        document.getElementById(paraName).type="password";
                    }else if(confs[i].paramHtmlTag == '11'){
                        $("#"+paraName).combobox('setValue', paraValue);
                    }

                }
            }
        });
    }

    function preSubmit() {
        var bpmNodeId = $.getUrlParam("nodeId");
        if (!$('#ff').form('validate'))
            return;
        var jsonData = $("#ff").serializeJson();

        $.ajax({
            type: "POST",
            dataType: "text",
            url: "../../api/save/plugin/param",
            contentType: "application/json;charset=UTF-8",

            data: JSON.stringify({
                bpmNodeId: bpmNodeId,
                bpmNodeParam: jsonData
            }),
            success: function(data){
            }
        });
    };

    function reloadList(){
        $('#dg').datagrid('reload');
        JLEUtil.closewin();
    };

    //保存
    function submitForm() {
        var bpmNodeId = $.getUrlParam("nodeId");
        if (!$('#ff').form('validate'))
            return;
        var jsonData = $("#ff").serializeJson();

        $.ajax({
            type: "POST",
            dataType: "text",
            url: "../../api/save/plugin/param",
            contentType: "application/json;charset=UTF-8",

            data: JSON.stringify({
                bpmNodeId: bpmNodeId,
                bpmNodeParam: jsonData
            }),
            success: function(data){
                $.messager.alert('提示','保存成功！','info');
            }
        });
    };

    //关闭
    function closeForm() {
        window.parent.JLEUtil.closewin();
    }
</script>
<body class="easyui-layout">
<div data-options="region:'north',title:''" style="height: 30px; ">
    <div  class="esaas-info-title2" style="background-color: #205081;" style="height: 40px; ">
        <div  style="padding: 2px; ">
            插件参数配置
        </div>
        <a style="position:absolute;right: 10px;top: 3px;width:22px;height: 22px;background: url('../../static/easyui/themes/icons/cancel6.png')" class="easyui-menubutton" onclick="closeForm()" hr="#"></a>
    </div>
</div>
<div data-options="region:'center',split:false">
    <div id="dynamicRender">

    </div>
</div>

</body>
</html>
